<template>
    <div class="rights-container">
        <breadCrumb title="权限列表"></breadCrumb>

        <el-card>
            <el-table :data="tableData"  height="900" border>
                <el-table-column width="50" label="序号" type="index">
                </el-table-column>
                <el-table-column label="权限名称" width="500">
                    <template slot-scope="scope">
                        <span style="margin-left: 10px">{{ scope.row.authName }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="路径" width="500">
                    <template slot-scope="scope">
                        <span style="margin-left: 10px">{{ scope.row.path }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="权限等级">
                    <template slot-scope="scope">
                        <div style="width: 40px;
                        height: 20px;color: #79C5FF;background-color: #ECF5FF;line-height: 20px;text-align: center;" v-if="scope.row.level === '0'">{{ meiju(scope.row.level) }}</div>
                        <div style="width: 40px;
                        height: 20px;color: #67C23A;background-color: #F0F9EB;line-height: 20px;text-align: center;" v-if="scope.row.level === '1'">{{ meiju(scope.row.level) }}</div>
                        <div style="width: 40px;
                        height: 20px;color: #E6AAA7;background-color: #FDF6EC;line-height: 20px;text-align: center;" v-if="scope.row.level === '2'">{{ meiju(scope.row.level) }}</div>
                    </template>
                </el-table-column>
            </el-table>
        </el-card>
    </div>
</template>

<script>
import { meiju } from '@/utils/index'
import { rightsRolesList } from '@/api/role'
export default {
  name: 'ShoppingRights',
  data () {
    return {
      tableData: []

    }
  },
  async created () {
    const res = await rightsRolesList()
    console.log(res.data)
    this.tableData = res.data
  },
  methods: {
    meiju
  }
}
</script>

<style lang="less" scoped>
.rights-container {
    overflow-y: hidden;
}
</style>
